<template>
  <div class="layout">
    <el-row>
      <el-col :span="3"><div class="grid-content">用户名</div></el-col>
      <el-col :span="4"
        ><div class="grid-content">{{ detailDate?.username }}</div></el-col
      >
      <el-col :span="4"><div class="grid-content">用户id</div></el-col>
      <el-col :span="5"
        ><div class="grid-content">{{ detailDate?.id }}</div></el-col
      >
      <el-col :span="4"><div class="grid-content">公司网站</div></el-col>
      <el-col :span="4"><div class="grid-content">www.xx.com</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="3"><div class="grid-content">资质</div></el-col>
      <el-col :span="4"
        ><div class="grid-content">{{ detailDate?.interlligence }}</div></el-col
      >
      <el-col :span="4"><div class="grid-content">一级行业</div></el-col>
      <el-col :span="5"
        ><div class="grid-content">{{ detailDate?.bussines }}</div></el-col
      >
      <el-col :span="4"><div class="grid-content">二级行业</div></el-col>
      <el-col :span="4"
        ><div class="grid-content">{{ detailDate?.bussines2 }}</div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="3"><div class="grid-content">用户类型</div></el-col>
      <el-col :span="4"
        ><div class="grid-content">{{ detailDate?.type }}</div></el-col
      >
      <el-col :span="4"><div class="grid-content">批注</div></el-col>
      <el-col :span="13"
        ><div class="grid-content">{{ detailDate?.evaluate }}</div></el-col
      >
    </el-row>
    <el-row :gutter="40" style="cursor: pointer">
      <el-col :span="5"
        ><div class="grid-content buttoms" @click="PassAll">
          通过所选
        </div></el-col
      >
      <el-col :span="5"
        ><div class="grid-content buttoms" @click="RejectAll">
          拒绝所选
        </div></el-col
      >
      <el-col :span="5"
        ><div class="grid-content buttoms" @click="RejectUser">
          拒绝账户
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content buttoms" @click="Delay">搁置</div></el-col
      >
      <el-col :span="5"
        ><div class="grid-content buttoms" @click="NextTask">
          下一个任务
        </div></el-col
      >
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
      :span-method="objectSpanMethod"
      :header-cell-style="headerStyle"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="标题" width="200" property="title" />
      <el-table-column property="describe" label="描述" width="220" />
      <el-table-column property="img" label="图片" width="150">
        <template #default="scoped">
          <div style="display: flex">
            <img
              style="
                width: 60px;
                height: 60px;
                marginright: 10px;
                marginleft: 5px;
              "
              :src="scoped.row.img[0]"
              alt=""
            />
            <img
              style="width: 60px; height: 60px"
              :src="scoped.row.img[1]"
              alt=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column property="address" label="操作" width="50">
        <template #default="scope">
          <el-button
            style="display: block;  marginbottom: 5px"
            link
            type="primary"
            size="small"
            @click="PassData(scope.row.dataID)"
            >通过</el-button
          >
          <el-button
            style="display: block;"
            link
            type="primary"
            size="small"
            @click="rejectData(scope.row.dataID)"
            >拒绝</el-button
          >
        </template>
      </el-table-column>
      <el-table-column property="address" label="落地页" heigth="100%">
        <el-table-column prop="name" width="300">
          <template #default>
            <a target="_blank" :href="detailDate?.url">{{ detailDate?.url }}</a>
            <img
              style="height: 100%; width: 98%; minheight: 320px"
              :src="detailDate?.url"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" width="50">
          <template #default>
            <el-button
              link
              type="primary"
              style=""
              size="small"
              @click="PassPage"
              >通过</el-button
            >
            <el-button
              link
              type="primary"
              style="marginleft: 0px"
              @click="RejectPage"
              size="small"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
import { ElMessageBox, ElMessage } from "element-plus";
const tableData = ref();
const detailDate = ref();
const params = reactive({
  id: "", // 用户id
  type: "", // 操作类型
  dataid: "", // 表格数据id
});

function getlist(param) {
  axios
    .get("/api/getDetail", {
      data: {
        id: param.id,
        next: param.next,
      },
    })
    .then((res) => {
      detailDate.value = res.data.data;
      tableData.value = res.data.data.data;
      params.id = res.data.data.id;
    });
}

onMounted(() => {
  let id = router.currentRoute.value.query.id;
  params.id = id;
  getlist({ id: id });
});

const multipleSelection = ref([]);

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

const PassData = (detailID) => {
  params.dataid = detailID;
  params.type = "通过";
  ElMessageBox.alert(params, "通过", {
    confirmButtonText: "OK",
  });
};
const rejectData = (detailID) => {
  params.dataid = detailID;
  params.type = "拒绝";
  ElMessageBox.alert(params, "拒绝", {
    confirmButtonText: "OK",
  });
};

const PassAll = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      type: "error",
      message: "请选择表格数据",
    });
  } else {
    let idList = [];
    multipleSelection.value.map((item) => {
      idList.push(item.dataID);
    });
    params.dataid = idList;
    params.type = "通过";
    ElMessageBox.alert(params, "通过所选", {
      confirmButtonText: "OK",
    });
  }
};

const RejectUser = () => {
  params.type = "拒绝账号";
  params.dataid = "";
  ElMessageBox.alert(params, "拒绝账号", {
    confirmButtonText: "OK",
  });
};

const Delay = () => {
  params.type = "搁置";
  params.dataid = "";
  ElMessageBox.alert(params, "搁置", {
    confirmButtonText: "OK",
    callback: () => {
      NextTask();
    },
  });
};

const RejectAll = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      type: "error",
      message: "请选择表格数据",
    });
  } else {
    let idList = [];
    multipleSelection.value.map((item) => {
      idList.push(item.dataID);
    });
    params.dataid = idList;
    params.type = "拒绝";
    ElMessageBox.alert(params, "拒绝所选", {
      confirmButtonText: "OK",
    });
  }
};

const NextTask = () => {
  getlist({ id: params.id, next: true });
};

const PassPage = () => {
  params.type = "通过落地页";
  params.dataid = "";
  ElMessageBox.alert(params, "通过落地页", {
    confirmButtonText: "OK",
  });
};

const RejectPage = () => {
    params.type = "拒绝落地页";
  params.dataid = "";
  ElMessageBox.alert(params, "拒绝落地页", {
    confirmButtonText: "OK",
  });
};
// 合并表格
const objectSpanMethod = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 5 || columnIndex === 6) {
    if (rowIndex == 0)
      return {
        rowspan: tableData.value.length,
        colspan: 1,
      };
    else {
      return [0, 0];
    }
  }
};
// 合并表头
function headerStyle({ row, rowIndex, columnIndex }) {
  if (rowIndex == 0) {
    row[1].rowSpan = 2;
  }
  if (rowIndex == 1) {
    row[0].colSpan = 0;
    row[1].colSpan = 0;
    if (columnIndex == 0 || columnIndex == 1) {
      return {
        display: "none",
      };
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.el-button--primary){
    margin: 0;
    margin-bottom: 5px;
}
:deep(.el-table .el-table__cell) {
  padding: 5px;
  text-align: center;
}
:deep(.el-table .cell) {
  padding: 0;
}
.layout {
  // padding: 10px;
  .grid-content {
    border: 1px solid #ebeef5;
    text-align: center;
    line-height: 32px;
    color: #606060;
  }
  .buttoms {
    border-radius: 4px;
    margin: 10px 0;
    color: #000;
    font-weight: 600;
  }
}
</style>
